`use strict`


console.log('Пункт 1 - 10 баллов \nПункт 2 - 16 баллов \nПункт 3 - вроде 54, не понял пункт про 40px для иконки \nПункт 4 - 20 баллов (в основном все на флексах, гриды в блоке кафе) \nПо PerfectPixel отклонений больше 10 пикселей не допускал \nСпасибо за проверку! ')

//Реализация бургер меню
const burger = document.querySelector('#burger');
const popup = document.querySelector('#popup');


const navigation = document.querySelector('#navigation').cloneNode(1);

burger.addEventListener('click', clickBurger)

function clickBurger(e) {
    e.preventDefault();
    burger.classList.toggle('active');
    popup.classList.toggle("open");
    renderPopup();
}

function renderPopup () {
    if (popup.firstChild == null) {
        popup.appendChild(navigation)
    }
}

const links = Array.from(navigation.children);
links.forEach((link) => {
  link.addEventListener("click", closeOnClick);
});

function closeOnClick() {
  popup.classList.remove("open");
  burger.classList.remove("active");
  renderPopup ()
}

// Реализация блока About с реализацией переключения

let slideIdx = 1;
swichSlides(slideIdx);

window.addEventListener("resize", function() {
    swichSlides(slideIdx);
})

function forwardSlide() {
  swichSlides(slideIdx += 1);
}

function backSlide() {
    swichSlides(slideIdx -= 1);  
}

function goSlide(n) {
    swichSlides(slideIdx = n);
}



function swichSlides(n) {
  let i;
  let slides = document.getElementsByClassName("about-content__card");
  let points = document.getElementsByClassName("point-block__item");


  if (n > slides.length) {
    slideIdx = 1
  }
  if (n < 1) {
    slideIdx = slides.length
  }
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
  }
  for (i = 0; i < points.length; i++) {
    points[i].className = points[i].className.replace(" point-block__active", "");
  }

  function screenFunction(){
     
    let w = window.innerWidth;
    if (w > 768 && slideIdx <= 3) {
        points[slideIdx - 1].className += " point-block__active";
        for (i=-1; i < 2; i++) {
            slides[i + slideIdx].style.display = "block";
        }              
    } else if (w > 768 && slideIdx > 3 ) {
        points[slideIdx - 3].className += " point-block__active";
        for (i=3; i > 0; i--) {
            slides[slideIdx - i].style.display = "block";
        }
    } else {
        slides[slideIdx - 1].style.display = "block";
        points[slideIdx - 1].className += " point-block__active";
    }
  }
  screenFunction();  
  
}
